<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="frame">
        <div class="card">
            <div class="header">
                <div class="title big">Weekly report</div>
                <div class="date small">16. Sept - 22. Sept</div>
                <div class="type small">Revenue</div>
                <div class="value big">￥ 1145.14</div>
            </div>
            <div class="parameter">
                <span class="red">Views</span>
                <span class="blue">Purchases</span>
            </div>
            <div class="statistic">
                <div class="line l1"></div>
                <div class="line l2"></div>
                <div class="line l3"></div>
                <div class="data red">
                    <svg>
                        <polyline points="7,43 47,10 87,20 127,9 167,35 207,45 247,16"></polyline>
                    </svg>
                    <div class="points">
                        <div class="point p1">
                            <div class="tooltip">43</div>
                        </div>
                        <div class="point p2">
                            <div class="tooltip">10</div>
                        </div>
                        <div class="point p3">
                            <div class="tooltip">20</div>
                        </div>
                        <div class="point p4">
                            <div class="tooltip">9</div>
                        </div>
                        <div class="point p5">
                            <div class="tooltip">35</div>
                        </div>
                        <div class="point p6">
                            <div class="tooltip">45</div>
                        </div>
                        <div class="point p7">
                            <div class="tooltip">16</div>
                        </div>
                    </div>
                </div>
                <div class="data blue">
                    <svg>
                        <polyline points="7,33 47,20 87,13 127,69 167,15 207,5 247,56"></polyline>
                    </svg>
                    <div class="points">
                        <div class="point p1">
                            <div class="tooltip">33</div>
                        </div>
                        <div class="point p2">
                            <div class="tooltip">20</div>
                        </div>
                        <div class="point p3">
                            <div class="tooltip">13</div>
                        </div>
                        <div class="point p4">
                            <div class="tooltip">69</div>
                        </div>
                        <div class="point p5">
                            <div class="tooltip">15</div>
                        </div>
                        <div class="point p6">
                            <div class="tooltip">5</div>
                        </div>
                        <div class="point p7">
                            <div class="tooltip">56</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="days">
                <div class="day">Mon</div>
                <div class="day">Tue</div>
                <div class="day">Wed</div>
                <div class="day">Thu</div>
                <div class="day">Fri</div>
                <div class="day">Sat</div>
                <div class="day">Sun</div>
            </div>
        </div>
    </div>
</body>

</html>